<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="addusershow">
        <i class="el-icon-plus"></i>新建用户
      </el-button>
    </div>
    <div class="Search">
      <!-- <el-form-item label="关键人">
    <el-input  placeholder="关键人"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary">查询</el-button>
      </el-form-item>-->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="text" placeholder="关键字"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click.native="seach">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="lists">
      <el-table
        :data="userlist"
        border
        style="width: 100%"
        :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
      >
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="accont" label="用户名" align="center" width="90"></el-table-column>
        <el-table-column prop="get_admin_info.name" label="姓名" align="center" width="90"></el-table-column>
        <el-table-column prop="get_admin_info.mobile" label="电话" align="center" width="120"></el-table-column>
        <el-table-column prop="get_admin_info.email" label="邮箱" align="center"></el-table-column>
        <el-table-column prop="get_admin_info.door" label="部门" align="center"></el-table-column>
        <el-table-column label="团队管理员" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.get_admin_info.is_team==1?'是':'否'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="get_role.name" label="角色" align="center"></el-table-column>
        <el-table-column prop="created_at" label="创建日期" align="center"></el-table-column>
        <el-table-column align="center" label="管理">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" icon="el-icon-edit" size="small"></el-button>
            <el-button
              @click="handpassword(scope.row)"
              type="text"
              size="small"
              icon="el-icon-lock"
            ></el-button>
            <el-button
              @click="handdel(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete-solid"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指标">
          <template slot-scope="scope">
            <el-button @click="set(scope.row)" type="text" size="small">设置</el-button>
            <!-- <el-button type="text" size="small">设置</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="float:right;">
        <el-pagination
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          @current-change="changeListPage"
          :total="user_all"
        ></el-pagination>
      </div>
    </div>
    <!-- edit -->
    <div class="prop" v-show="edit">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:800px;">
        <div class="propheader">
          <!-- 新建用户 -->
          {{title}}
          <!-- <p class="close1" @click="setedit">关闭</p> -->
          <el-button class="close1" @click.native="setedit" type="text">关闭</el-button>
        </div>
        <div class="hidenn">
          <div class="useritem">
            <div class="litname">用户名:</div>
            <el-input v-model="adduser.account" maxlength="11" placeholder="用户名" style="width:200px;"></el-input>
          </div>
          <div class="useritem">
            <div class="litname">姓名:</div>
            <el-input placeholder="姓名" v-model="adduser.name" style="width:200px;"></el-input>
          </div>
          <div class="useritem">
            <div class="litname">电话：</div>
            <el-input placeholder="电话：" v-model="adduser.mobile" style="width:200px;"></el-input>
          </div>
          <div class="useritem">
            <div class="litname">邮箱</div>
            <el-input placeholder="邮箱" v-model="adduser.email" type="email" style="width:200px;"></el-input>
          </div>
          <div class="useritem">
            <div class="litname">部门：</div>
            <el-cascader
              :options="Door_list"
              style="width:150px;"
              :props="props"
              v-model="value_bm"
              clearable
            ></el-cascader>
          </div>
          <div class="useritem">
            <div class="litname">团队管理员：</div>
            <el-radio v-model="adduser.is_team" label="1">是</el-radio>
            <el-radio v-model="adduser.is_team" label="2">否</el-radio>
          </div>
          <div class="useritem">
            <div class="litname">角色：</div>
            <el-select v-model="adduser.role_id"   @input="change($event)"  placeholder="请选择" style="width:150px;">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="save1">
          <el-button type="primary" @click.native="addsave">提交</el-button>
        </div>
      </div>
    </div>
    <div class="prop" v-show="look">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:420px;">
        <div class="propheader">
          指标设置
          <el-button class="close1" type="text" style="margin-top:0;" @click.native="setlook">关闭</el-button>
        </div>
        <div class="user_name">
          <p class="nameleft">姓名</p>
          <p class="nameright">{{indexparam.name}}</p>
        </div>
        <div class="user_name">
          <p class="nameleft">部门</p>
          <p class="nameright">{{indexparam.position}}</p>
        </div>
        <div class="listwarp" style="margin-bottom:30px;">
          <el-button
            class="add"
            type="text"
            style="margin-bottom:0;"
            @click.native="setindexstatus"
          >新建指标</el-button>
          <!-- <div class="add" @click="setindexstatus">新建指标</div> -->
          <el-table :data="indexparam.list" 
           :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border max-height="204px" style="width: 100%">
            <el-table-column prop="year" align="center" label="年度"></el-table-column>
            <el-table-column prop="num" align="center" label="指标"></el-table-column>
            <el-table-column label="操作" align="center" width="138">
              <template slot-scope="scope">
                <el-button @click="delindex(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="prop" v-if="indexstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:250px;width:400px;margin-top:50px;">
        <div class="propheader">
          新建指标
          <el-button class="close1" type="text" @click.native="setindexstatus">关闭</el-button>
        </div>

        <div class="bm_item">
          <div class="bm_name">年度</div>
          <el-date-picker v-model="year" style="width:60%;" type="year" placeholder="选择年"></el-date-picker>
        </div>
        <div class="bm_item">
          <div class="bm_name">指标(万元)</div>
          <el-input style="width:60%;" v-model="addnum.num" type="number"></el-input>
        </div>

        <div class="lc_item lc_itemnon lc_itemnon1">
          <el-button type="primary" @click.native="addnum_save">添加</el-button>
          <el-button type="primary" @click.native="setindexstatus">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUserList,
  addnumber,
  getnum,
  getDoorList,
  getRoleList,
  SETDATE,
  addUser,
  getUserInfo,
  setUserInfo,
  resetPassword
} from "@/api/System.js";
export default {
  name: "PagePermission",
  data() {
    return {
      page: 1,
      user_all: 0,
      //部门列表
      Door_list: [],
      value_bm: [],
      props: {
        children: "children",
        label: "name",
        value: "id",
        checkStrictly: true
      },

      //角色列表
      //关键字
      text: "",
      value: "",
      options: [],
      // radio:1,
      value: "",
      look: false,
      formInline: {
        user: "",
        region: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        }
      ],
      title: "新建用户",
      //用户id
      userId: "",
      //修改框
      edit: false,
      //用户列表
      userlist: [],
      //1代表添加用户2代表修改
      type: 1,
      adduser: {
        account: "",
        top_id:'',
        name: "",
        mobile: "",
        //TODO
        door_id: "",
        role_id: "",
        is_team: "1",
        email: ""
      },
      //添加指标参数
      year: "",
      addnum: {
        year: "",
        num: ""
      },
      indexparam: {
        id: "",
        name: "",
        position: "",
        list: []
      },
      indexstatus: false
    };
  },
  created() {
    // console.log(getUserList)
    this.getlist();
    this.getrole();
    this.doorlist();
  },
  methods: {
    setindexstatus() {
      if (this.indexstatus) {
        this.year = "";
        this.addnum.year = "";
        this.addnum.num = "";
      }
      this.indexstatus = !this.indexstatus;
    },
    //添加指标
    addnum_save() {
      if (this.year) {
        var time = new Date(this.year).getFullYear();
        console.log(time);
        this.addnum.year = time;
      } else {
        this.$message({
          message: "年度不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.addnum.num) {
        this.$message({
          message: "指标不能为空",
          type: "warning"
        });
        return;
      }
      addnumber({ id: this.indexparam.id, data: this.addnum }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "指标添加成功",
            type: "success"
          });
          this.setindexstatus();
          getnum({ id: this.indexparam.id }).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.indexparam.id = res.data.id;
              this.indexparam.name = res.data.get_admin_info.name;
              this.indexparam.position = res.data.get_admin_info.door;
              this.indexparam.list = res.data.get_admin_num;
            }
          });
        }
      });
      console.log(this.addnum);
    },
    //获取部门列表
    doorlist() {
      getDoorList().then(res => {
        console.log(res);
        if (res.code == 200) {
          this.Door_list = res.data;
        }
      });
    },
    addusershow() {
      this.title = "新建用户";
      this.type = 1;
      this.adduser.account = "";
      this.adduser.name = "";
      this.adduser.email = "";
      this.adduser.mobile = "";
      this.adduser.is_team = "1";
      this.adduser.role_id = "";
      //TODO
      this.adduser.door_id = "0";
      this.value_bm = [];
      this.setedit();
    },

    // 获取角色列表
    getrole() {
      getRoleList({ per: 9999 }).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.options = res.data.data;
          //去掉超级管理员
          // this.options.splice(0,1)
        }
      });
    },
    //添加保存
    addsave() {
      if (!this.adduser.account) {
        this.$message({
          message: "用户名不能为空",
          type: "warning"
        });
        return;
      }
      var len=this.adduser.account.length
      if(len<6){
  this.$message({
          message: "用户名最小长度为6",
          type: "warning"
        });
        return;
      }
      if (!this.adduser.name) {
        this.$message({
          message: "姓名不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.adduser.mobile.length) {
        this.$message({
          message: "请输入正确的电话号码",
          type: "warning"
        });
        return;
      }
      if (!this.adduser.email) {
        this.$message({
          message: "请输入正确的邮箱",
          type: "warning"
        });
        return;
      }
      if (!this.adduser.role_id) {
        this.$message({
          message: "角色不能为空",
          type: "warning"
        });
        return;
      }

      console.log(this.value_bm);
      if (this.value_bm.length < 1) {
          this.$message({
          message: "部门不能为空",
          type: "warning"
        });
        return;
      } else {
        var len = this.value_bm.length - 1;

        this.adduser.door_id = this.value_bm[len];
        //部门最上级id
        this.adduser.top_id=this.value_bm[0]
      }
      console.log(this.adduser);
      // return
      if (this.type == 1) {
        addUser(this.adduser).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.setedit();
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.page = 1;
            this.SearchWord = "";
            this.getlist();
            this.value_bm = [];
          }
        });
      } else {
        let data = {
          id: this.userId,
          param: this.adduser
        };
        setUserInfo(data).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
            this.setedit();
            this.page = 1;
            this.value_bm = [];
            this.SearchWord = "";
            this.getlist();
          }
        });
      }
    },
    //查询
    seach() {
      this.page = 1;
      this.getlist();
    },
    //改变页数
    changeListPage(e) {
      console.log(e);
      this.page = e;
      this.getlist();
    },
    getlist() {
      let data = {
        per: 10,
        page: this.page,
        SearchWord: this.text
      };
      getUserList(data).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.userlist = res.data.data;
          console.log(this.userlist);
          this.user_all = res.data.total;
          this.page = res.data.current_page;
          this.userlist.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
        } else {
        }
      });
    },
    //指标设置弹框
    setlook() {
      if (this.look) {
        this.userId = "";
        this.indexparam.id = "";
        this.indexparam.position = "";
        this.indexparam.name = "";
        this.indexparam.list = [];
      }
      this.look = !this.look;
    },
    //修改框弹出
    setedit() {
      if (this.edit) {
        this.value_bm = [];
      }
      this.edit = !this.edit;
    },
    //重置密码
    handpassword(row) {
      console.log(row);
      this.$confirm("是否确认重置密码?", "重置密码", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          resetPassword(row.id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "重置密码成功"
              });
            }
            console.log(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置"
          });
        });
    },
    set(row) {
      this.userId = row.id;
      getnum({ id: row.id }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.indexparam.id = res.data.id;
          this.indexparam.name = res.data.get_admin_info.name;
          this.indexparam.position = res.data.get_admin_info.door;
          this.indexparam.list = res.data.get_admin_num;
          this.setlook();
        }
      });
      //
    },
    //点击删除
    handdel() {
      this.$confirm("是否确认删除该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleChange(e) {
      console.log(e);
    },
  change(e){
    this.$forceUpdate()
    },
    handleClick(row) {
      console.log(row);
      this.title = "编辑用户";
      this.type = 2;
      getUserInfo(row.id).then(res => {
        console.log(res);
        if (res.code == 200) {
         console.log("嘻嘻嘻嘻嘻嘻嘻")
          this.userId = res.data.id;
          this.adduser.account = res.data.accont;
          this.adduser.name = res.data.get_admin_info.name;
          this.adduser.email = res.data.get_admin_info.email;
          this.adduser.mobile = res.data.get_admin_info.mobile;
          this.adduser.is_team = "" + res.data.get_admin_info.is_team;
          // this.adduser.role_id =String(res.data.get_role.id);
          this.adduser.role_id =res.data.get_role.id;
          console.log(this.adduser)
            this.value_bm=res.data.get_admin_info.arr_doors
            // this.value_bm.push(res.data.get_admin_info.door_id)
          this.adduser.door_id = res.data.get_admin_info.door_id+"";
           this.setedit();
        }
      });
    }
  }
};
</script>
<style lang="scss" scope>
.header {
  height: 40px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.lists {
  width: 97%;
  margin: 0 auto;
  margin-bottom: 100px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 400px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.hidenn {
  width: 90%;
  display: flex;
  height: 250px;
  flex-wrap: wrap;
  margin: 0 auto;
}
.hidenn::-webkit-scrollbar {
  // 纵向滚动条和横向滚动条宽度
  width: 2px;
  // height: 1px;
}

.hidenn::-webkit-scrollbar-thumb {
  // 滚动条背景条样式
  border-radius: 1px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #5b5f63;
}
.hidenn::-webkit-scrollbar-track {
  // 滚动条按钮样式
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  background: #00284d;
}

.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: 5px;
  color: #169bd5;
}
.litname {
  width: 116px;
  padding-left: 20px;
}
.useritem {
  display: flex;
  width: 49.9%;
  align-items: center;
  height: 45px;
}
.user_name {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  height: 50px;
}
.nameleft {
  width: 60px;
}
.listwarp {
  // width: 420px;
  width: 90%;
  margin: 0 auto;
}
.add {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  color: #169bd5;
  margin-bottom: 20px;
}
.bm_item {
  width: 90%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  .bm_name {
    width: 25%;
    font-size: 14px;
  }
}
.lc_item {
  width: 90px;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save1{
  margin: 0 auto;
  width: 50px;
  margin-top: 10px;
}
</style>
